<template>
	<view class="shop-wrapper" @click="goPage">
		<view class="flex">
			<image class="shop-image" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/pic1.png" mode=""></image>
			<view class="shop-info flex-1">
				<view class="shop-name flex flex-align-center flex-space-between">
					<view class="flex flex-align-center">
						<text class="font32 color-181D18 f-b">商家名称</text>
						<view class="status flex flex-align-center font28">
							<view class="point"></view>
							在线
						</view>
					</view>
					<view class="star font28 flex flex-align-center">
						<image style="width: 28rpx;height: 28rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_star.png" mode=""></image>
						5.0
					</view>
				</view>
				<view class="font28 color-8E8E8E m-t-20">可提供的服务内容</view>
				<view class="font28 color-8E8E8E m-t-20 flex flex-align-center flex-space-between">
					已服务470
					<view class="flex flex-align-center">
						<image style="width: 26rpx;height: 32rpx;margin-right: 10rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_loction.png" mode=""></image>
						25.30km
					</view>
				</view>
			</view>
		</view>
		<view class="button-box flex flex-space-between m-t-20 flex-align-end">
			<view class="flex flex-column flex-center shop-identity">
				<image 
				style="width: 40rpx;height: 40rpx;margin-bottom: 10rpx;" 
				src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_shop.png" mode=""></image>
				<view class="font28" style="color: #3FA897;">
					认证商家
				</view>
				<view class="right-line"></view>
			</view>
			<view class="flex flex-column flex-center flex-1">
				<image 
				style="width: 40rpx;height: 40rpx;margin-bottom: 10rpx;" 
				src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_follow.png" mode=""></image>
				<view class="font28 color-8E8E8E">
					关注457
				</view>
			</view>
			<view class="flex flex-column flex-center flex-1">
				<image 
				style="width: 44rpx;height: 40rpx;margin-bottom: 10rpx;" 
				src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_comment.png" mode=""></image>
				<view class="font28 color-8E8E8E">
					评论217
				</view>
			</view>
			<view class="button-take flex flex-center font28 color-w">
				去下单
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	function goPage () {
		uni.navigateTo({
			url: '/pages/accompany-tmp/index/shopDetail/shopDetail'
		})
	}
</script>

<style lang="scss" scoped>
	.shop-wrapper {
		padding: 30rpx 0 20rpx 0;
		border-bottom: 1rpx solid #E5E5E5;
		.shop-image {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;
		}
		.shop-info {
			margin-left: 20rpx;
			.shop-name {
				color: #3FA897;
				margin-top: 4rpx;
				.status {
					margin-left: 20rpx;
					.point {
						width: 12rpx;
						height: 12rpx;
						background-color: #3FA897;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}
				.star {
					position: relative;
					top: 14rpx;
					image {
						margin-right: 10rpx;
					}
				}
			}
		}
		.shop-identity {
			width: 194rpx;
			position: relative;
			.right-line {
				width: 2rpx;
				height: 72rpx;
				background: #E5E5E5;
				position: absolute;
				right: 0rpx;
			}
		}
		.button-take {
			height: 64rpx;
			padding: 0rpx 34rpx;
			background-color: #3FA897;
			border-radius: 64rpx;
		}
	}
</style>